<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The HTML Presentation Framework</title>
        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
            html,body{
                width: 100%;
                height: 100%;
                background:#0A0F23;
            }
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>
    <div id="main" style="width: 100%;height:100%;"></div>
    <script src="../components/echarts-4.0.4.min.js"></script>
        <script>
            var myChart = echarts.init(document.getElementById('main'));
;
            var weekDay = 0;
            var data = [{
                name: '2013年PCT专利申请',
                value: [11, 8, 9, 7, 4, 3, 5, 7, 8, 9]
            }];

            var option = {
                title: {
                    text: '2017年我国国内PCT专利申请量前十申请人',
                    left: 'center',
                    top: '5%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b','#ef4862','#f86e89','#f8849b','#f5642b','#ef7218','#e17d35','#e5c124','#f5d650','#f7e46c'],
                angleAxis: {
                    type: 'category',
                    data: [{
                        value: '华为技术有限公司',
                        textStyle: {
                            fontSize: 25
                        }
                    }, '京东方科技集团股份有限公司', '深圳大疆创新科技有限公司', '惠科股份有限公司', '深圳传音通讯有限公司', '中兴通讯股份有限公司', '广东欧珀移动通信有限公司','腾讯科技（深圳）有限公司','深圳市华星光电技术有限公司','平安科技（深圳）有限公司'],
                    z: 10,
                    axisLabel:{
                        color: '#fff'
                    },
                    axisLine:{
                        lineStyle:{
                            color: '#fff'
                        }
                    }
                },
                polar: {
                    center: ['50%', '60%'],
                    radius: '50%'
                },
                radiusAxis: {},
                series: [{
                    type: 'bar',
                    data: [11, 8, 9, 7, 4, 3, 5, 7, 8, 9],
                    center: ['50%', '60%'], //饼图的中心（圆心）坐标
                    coordinateSystem: 'polar',
                    name: data["0"].name,
                    stack: 'a',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 0,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            color: "#f5642b",
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };


            var currentIndex = -1;
            var timer1 = setInterval(function () {
                var dataLen = option.series[0].data.length;
                // 取消之前高亮的图形
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                currentIndex = (currentIndex + 1) % dataLen;
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
            }, 1000);
            myChart.setOption(option);
        </script>
    </body>
</html>
